<template>
  <div>
    {{  x  }}
    <div :class="{ active: isActive }">
    12321</div>

    <button  @click="isActive=!isActive" >isActive</button>
    <button  @click="x.value = x.value+1" >isActiveX</button>
    <button  @click="add1" >isActiveX</button>
    
  </div>
</template>
<script   setup>
import { computed, ref } from "vue";
const isActive = ref(true)
const hasError = ref(false)

const x = ref(1)
const  add1 = function(){
  isActive= !isActive
  // x = x+1;
  x.value = x.value+1;
}
 
</script>

<style scoped>
.active{
  background: pink;
}
</style>
 